<template>
  <div class="screen-card">
    <van-form @submit="onSubmit">
      <article class="form-card">
        <van-field
          v-model="nationality"
          required
          name="国家/地区"
          label="国家/地区"
          :colon="true"
          input-align="right"
          readonly
        />
        <van-field
          v-model="idType"
          required
          name="证件类型"
          label="证件类型"
          :colon="true"
          input-align="right"
          readonly
        />
        <van-field
          v-model="cardNum"
          required
          name="证件号码"
          label="证件号码"
          :colon="true"
          input-align="right"
          :rules="[{ required: true, message: '请填写证件号码' }]"
        />
        <van-field
          v-model="name"
          required
          name="姓名"
          label="姓名"
          :colon="true"
          input-align="right"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="phone"
          required
          name="电话号码"
          label="电话号码"
          :colon="true"
          input-align="right"
          :rules="[{ required: true, message: '请填写电话号码' }]"
        />
      </article>
      <div style="margin: 16px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
        >提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'cardStatusQuery',
  data () {
    return {
      nationality: '中国',
      idType: '中华人民共和国居民身份证',
      cardNum: '',
      name: '',
      phone: ''
    }
  },
  methods: {
    onSubmit () {
      this.$http.postJson('getInformation', {
        cardNum: this.cardNum,
        idType: this.idType,
        name: this.name,
        nationality: this.nationality,
        phone: this.phone
      }, {
        Authorization: this.$access_token
      }).then(res => {
        this.$router.push({
          name: 'cardQueryResult',
          params: {
            data: res.data
          }
        })
      }, err => {
        this.$toast(err.msg)
      })
    }
  }
}
</script>

<style scoped lang="less">
.form-card {
  background-color: #fff;
  box-shadow: 0 0 37.5px #e8e8e8;
  border-radius: 15px;
  padding: 10px;
}
</style>
